<template>
    <div class="w-full flex flex-row flex-nowrap justify-between items-center px-4 py-2 text-regular">
        <div>播放队列</div>
        <delete-one theme="filled" size="20" fill="#e62525" />
    </div>
    <el-scrollbar>
        <div class="flex flex-col gap-1 py-2">
            <div v-for="audio in list"
                class="w-full flex flex-row flex-nowrap justify-between items-center px-2 py-1 rounded hover:bg-page">
                <div class="flex-grow text-regular cursor-pointer">
                    <div class="text-sm text-nowrap truncate">男儿当自强</div>
                    <div class="text-xs text-secondary">林子祥</div>
                </div>
                <div class="flex flex-row">
                    <div class="text-sm text-regular mx-8">{{ "03:45" }}</div>
                    <delete-five theme="filled" size="16" fill="#e62525" class="cursor-pointer" />
                </div>
            </div>
        </div>
    </el-scrollbar>
</template>

<script setup lang="ts">
import { DeleteOne, DeleteFive } from '@icon-park/vue-next';

defineProps({
    list: { type: Array, default: [] }
})
</script>
